<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-form ref="form" label-width="80px">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="学科名称">
                <el-input v-model="queryParameter.subjectName"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-form>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-button @click="clearSearchResults">清除</el-button>
            <el-button type="primary" @click="getSubjectsObj">搜索</el-button>
          </div>
        </el-col>
        <el-col :offset="11" :span="2">
          <div class="grid-content bg-purple">
            <el-button
              icon="el-icon-edit"
              type="success"
              @click="addDialogVisible = true"
              >新增学科</el-button
            >
          </div>
        </el-col>
      </el-row>
      <template>
        <el-alert
          style="margin: 10px 0"
          :title="`数据一共 ${counts} 条`"
          type="info"
          show-icon
          :closable="false"
        ></el-alert>
      </template>
      <div>
        <template>
          <el-table :data="subjectsList">
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="100px"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="subjectName"
              label="学科名称"
              width=""
            ></el-table-column>
            <el-table-column
              align="center"
              prop="username"
              label="创建者"
              width="140"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="addDate"
              label="创建时间"
              width="160"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="isFrontDisplay"
              label="前台是否显示"
              width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="twoLevelDirectory"
              label="二级目录"
              width="80"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="tags"
              label="标签"
              width="50"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="totals"
              label="题目数量"
              width="80"
            ></el-table-column>
            <el-table-column align="center" prop="" label="操作" width="350">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="
                    $router.push(
                      `directorys?id=${scope.row.id}&name=${scope.row.subjectName}`
                    )
                  "
                  >学科分类</el-button
                >
                <el-button
                  size="mini"
                  type="info"
                  @click="
                    $router.push(
                      `tags?id=${scope.row.id}&name=${scope.row.subjectName}`
                    )
                  "
                  >学科标签</el-button
                >
                <el-button
                  size="mini"
                  type="warning"
                  @click="getEditSubjectInfo(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="delSubjects(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="block" style="margin: 20px; float: right">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParameter.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryParameter.pagesize"
          layout="prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>
    <!--    新增学科-->
    <el-dialog title="新增学科" :visible.sync="addDialogVisible" width="30%">
      <subjects-add @onAddParameter="getUsersParameter"></subjects-add>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </span>
    </el-dialog>
    <!--    修改学科-->
    <el-dialog title="修改学科" :visible.sync="editDialogVisible" width="30%">
      <div class="container">
        <el-form
          ref="form"
          label-width="80px"
          :model="editParameter"
          :rules="addFromRules"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input
              v-model="editParameter.subjectName"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
              active-value="1"
              inactive-value="0"
              v-model="editParameter.isFrontDisplay"
              active-color="#13ce66"
            ></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubject">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as Subjects from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
import SubjectsAdd from '@/module-hmmm/components/subjects-add'

export default {
  components: {
    SubjectsAdd
  },
  data () {
    return {
      // 请求参数
      queryParameter: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      subjectsList: [], // 学科列表
      counts: null, // 学科列表counts
      addDialogVisible: false, // 添加对话框默认隐藏
      UsersParameter: {}, // 子组件添加数据
      editDialogVisible: false, // 修改对话框默认隐藏
      editParameter: {
        id: null,
        subjectName: '',
        isFrontDisplay: 1

      },
      addFromRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    this.getSubjectsObj()
  },

  methods: {
    // 删除学科
    delSubjects (row) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await Subjects.remove(row)
        console.log(row.id)
        console.log(res)
        if (!res.success) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        await this.getSubjectsObj()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取修改学科的信息
    getEditSubjectInfo (row) {
      this.editDialogVisible = true
      this.editParameter.id = row.id
      this.editParameter.subjectName = row.subjectName
      this.editParameter.isFrontDisplay = row.isFrontDisplay.toString()
    },
    // 修改学科
    async editSubject () {
      try {
        await Subjects.update(this.editParameter)
        this.$message.success('修改成功')
        await this.getSubjectsObj()
        this.editDialogVisible = false
      } catch (err) {
        this.$message.error('修改失败')
        console.log(err)
      }
    },
    // 获取学科列表
    async getSubjectsObj () {
      try {
        const { data: res } = await Subjects.list(this.queryParameter)
        res.items.forEach(item => {
          item.addDate = dayjs(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        })
        this.subjectsList = res.items
        this.counts = res.counts
        console.log('学科列表', res)
      } catch (err) {
        console.log(err)
      }
    },
    // 接收子组件数据
    getUsersParameter (UsersParameter) {
      this.UsersParameter = UsersParameter
    },
    // 清除搜索结果
    clearSearchResults () {
      this.queryParameter.subjectName = ''
      this.getSubjectsObj()
    },
    // 添加学科
    async addSubject () {
      try {
        const { data: res } = await Subjects.add(this.UsersParameter)
        console.log(res)
        this.$message.success('学科添加成功')
        await this.getSubjectsObj()
        this.addDialogVisible = false
      } catch (err) {
        console.log(err)
        this.$message.error('学科添加失败')
      }
    },
    // 分页
    handleSizeChange (pagesize) {
      this.queryParameter.pagesize = pagesize
      this.getSubjectsObj()
    },
    handleCurrentChange (page) {
      this.queryParameter.page = page
      this.getSubjectsObj()
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background-color: #fff;
  height: 100%;
  overflow: hidden;
  padding: 20px;

  .head {
    margin: 20px;

    // .el-col-6 {
    //   width: 100px;
    // }
  }
}

.el-input {
  width: 150px;
}

.fontSize {
  font-size: 14px;
  font-weight: 700;
  color: #606266;
  padding: 0 12px 0 20px;
}
</style>
